<template>
  <div class="app-news">
    <a-spin v-if="loading" tip="Loading...">
      <a-card title="加载中" />
    </a-spin>
    <a-card
      class="news-box"
      :hoverable="true"
      v-for="{ categoryId, categoryName, news } in list"
      :key="categoryId"
      :title="categoryName"
    >
      <a
        class="news-link"
        v-for="{ id, title, linkUrl } in news"
        :key="id"
        target="_blank"
        :href="linkUrl"
        >{{ title }}</a
      >
    </a-card>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { getHomeRightNews } from '@/api/dashborard/news'
export default defineComponent({
  name: 'News',
  setup() {
    const loading = ref(true)
    const list = reactive([])
    getHomeRightNews().then((res) => {
      list.push(...res)
      loading.value = false
    })
    return {
      list,
      loading,
    }
  },
})
</script>

<style lang="scss" scoped>
.app-news {
  padding-left: 10px;
  padding-right: 10px;
  .news-box {
    .news-link {
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      font-size: 12px;
      margin-bottom: 5px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
